<template>
  <div>
    <!-- v-model 修饰符, 来增强 v-model 的功能 -->
    <!-- 
      .number 在绑定给变量时, 先转成 number 类型
      原理: 利用了 parseFloat() 方法转换
     -->
    年龄: <input v-model.number="age" type="text" /><br>
    <!-- .trim 在绑定给变量时, 自动调用 trim() 后再赋值 -->
    用户名: <input v-model.trim="username" type="text"><br>
    <!-- change 触发条件: 当用户修改内容并失去焦点才会触发 -->
    <!-- input 触发条件: 当用户修改内容会触发 -->
    <!-- v-model 双向绑定给数据的时机, 默认是用的 input 事件 -->
    <!-- .lazy 懒, 将默认使用的 input 事件, 改为 change 事件 
      可以提高一点点性能, 但没什么用, 所以用的极少
    -->
    自我介绍: <textarea v-model.lazy="intro" name="" id="" cols="30" rows="10"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      username: '',
      intro: ''
    }
  }
}
</script>

<style>

</style>